<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
	<title>使用Ajax验证用户名是否存在</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#check-user-btn").click(function() {
				var username = $("#user-input").val();
				$.ajax({
					url: "https://mock.apifox.cn/m1/2787428-0-default/hasname",
					type: "GET",
					success: function(response) {
						if (response.success) {
							$("#result-info").html("用户"+username + "已存在");
						} else {
							$("#result-info").html("用户"+username + "不存在");
						}
					},
					error: function(jqXHR, textStatus, errorThrown) {
						alert("发生错误："+ textStatus + " - " + errorThrown);
					}
				});
			})
		})
	</script>
</head>
<body>
	<div>
		<div>用户名:</div>
		<input type="text" id="user-input" name="user-input" />
		<div><button id="check-user-btn">验证</button></div>
	</div>
	<div id="result-info"></div>
</body>
</html>